<template>
	<view class="page">
		<view class='navbar'>
			<image class='logo' @click='isCollapse=!isCollapse'
				src='https://qjmedianew.com/group1/M00/00/02/cEoyGmCvOCCATaqyAAAEjRMzqVs986.png'>
			</image>
			<view class="navbar-Right">
				<!-- <i class="el-icon-bell navbar-Right-bell"></i> -->
				<!-- <view class="line">|</view> -->
				<!-- <view class="business" @click="showUserMsg=!showUserMsg">商务对接</view> -->
				<view class="business" @click="isScreenShow = true">数据统计</view>
				<view class="line">|</view>
				<el-dropdown @command='reHome'>
					<el-button type='text' style='color: #32333B;' v-show="user">
						{{ user.userName || '' }}<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="0" icon="el-icon-user">账户信息</el-dropdown-item>
						<el-dropdown-item command="1" icon="el-icon-switch-button">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</view>
		</view>
		
		<user-info :dialogVisible="isUserInfoShow" :item="userItem" @closeDialog="userCloseDialog"></user-info>
		<!-- <useMsgCode v-if="showUserMsg" /> -->
		<confirm @confirmFlagClick="closeConfirm" :confirmFlag="login" :title="confirmTitle"></confirm>
		<!-- <motai v-show="login" /> -->
		<view class="cantainer">
			<el-menu :default-active="first+'-'+second" class="el-menu-vertical-demo" @close="handleClose"
				@open="handleOpen" :collapse="isCollapse" background-color="#242737" text-color="#fff"
				active-text-color="#4A92FD" :unique-opened="true">
				<!-- <el-menu-item index='-1-0' @click='openPage(-1,0)' :class="{'active':active==-1}">
					<image :src="first==-1?homeMenuIcon[1]:homeMenuIcon[0]" mode="" class="menuIcon"></image>
					<span slot="title">首页</span>
				</el-menu-item> -->
				<view v-for="(item,i) in navbarList" :key="i">
					<el-submenu :index="i.toString()" :class="{'menuLeft':active==i}">
						<template slot="title">
							<view :class="{'active':active==i}" class="border"></view>
							<view class="menuBorder"></view>
							<image :src="item.menuIcon" mode="" class="menuIcon"></image>
							<span slot="title">{{item.title}}</span>
						</template>
						<el-menu-item-group>
							<view class="" v-for="(k,v) in item.child" :key="v">
								<el-menu-item :index="i + '-'+ v" @click='openPage(i,v)'>{{k.title}}</el-menu-item>
							</view>
						</el-menu-item-group>
					</el-submenu>
				</view>
			</el-menu>
			
			<!-- 
				first   第几项 		-1 首页 0 配置管理 1 ...
				active  当前第几项	和 first 对应
				second  第几个子项	0 第一项 1 第二项 2 ...
			 -->
			<view class="content" :class="{'childPage':first!=-1}">
				<!-- 首页 -->
				<!-- <home class='iframe' v-if="this.first==-1&&this.second==0" /> -->
				<!-- 配置管理 -->
				<configuration class='iframe bg-fff' v-if="first==0" :second='second' />
				<!-- 标签管理 -->
				<labelManagement class='iframe bg-fff' v-if="first==1" :second='second' />
				<!-- 数据统计 -->
				<dataStatistics class='iframe bg-fff' v-if="first==2" :second='second' />
				<!-- 奖品配置 -->
				<prizeAllocation class='iframe bg-fff' v-if="first==3" :second='second' />
				<!-- 审核 -->
				<reviews class='iframe bg-fff' v-if="first==4" :second='second' />
				<!-- 数据收益 -->
				<dataRevenue class='iframe bg-fff' v-if="first==5" :second='second' />
				<!-- 广告媒体管理 -->
				<advertisingMedia class='iframe bg-fff' v-if="first==6" :second='second' />
				<!-- 链接管理 -->
				<linkManagement class='iframe bg-fff' v-if="first==7" :second='second' />
				<!-- 合同管理 -->
				<contractManagement class='iframe bg-fff' v-if="first==8" :second='second' />
				<!-- 财务 -->
				<finance class='iframe bg-fff' v-if="first==9" :second='second' />
			</view>
		</view>
	
		<view class="large-screen" v-if="isScreenShow">
			<!-- <view class="go-back" v-if="isBackShow">< 返回</view> -->
			
			<!-- 本地 -->
			<!-- <iframe src="../../static/screen-page/index.html"></iframe> -->
			<!-- 线上 -->
			<iframe :src="screenUrl"></iframe>
			<!-- <web-view src="../../static/screen-page/index.html" :webview-styles="webviewStyles"></web-view> -->
		</view>
	</view>
</template>
<script>
	import home from '../../components/index.vue'
	import configuration from '../../components/configuration.vue'
	import labelManagement from '../../components/labelManagement.vue'
	import dataStatistics from '../../components/dataStatistics.vue'
	import prizeAllocation from '../../components/prizeAllocation.vue'
	import reviews from '../../components/reviews.vue'
	import contractManagement from '../../components/contractManagement.vue'
	import finance from '../../components/finance.vue'
	import advertisingMedia from '../../components/advertisingMedia.vue'
	import dataRevenue from '../../components/dataRevenue.vue'
	import linkManagement from '../../components/linkManagement.vue'
	
	import confirm from '../../components/dialog/confirm.vue'
	import userInfo from '../../components/dialog/userInfo.vue'
	
	// import useMsgCode from '../../components/useMsgCode.vue'
	// import loginOut from '../../components/dialog/loginOut.vue'
	// import motai from '../../components/model/motai.vue'
	// import Adhome from '../../components/indexAdvertising.vue'
	// import Adplaner from '../../components/Adplaner.vue'
	// import AdDetail from '../../components/AdvertisingDetails.vue'
	import { Util } from '../../utils/util.js'
	import { Request } from '../../model/request.js'
	export default {
		components: {
			home,
			configuration,
			labelManagement,
			dataStatistics,
			prizeAllocation,
			reviews,
			contractManagement,
			finance,
			advertisingMedia,
			dataRevenue,
			linkManagement,
			confirm,
			userInfo
			// useMsgCode,
			// loginOut,
			// motai,
			// Adhome,
			// Adplaner,
			// AdDetail
		},
		data() {
			return {
				isCollapse: false,
				homeMenuIcon: ['/static/home/sy.png', '/static/home/sy_1.png'],
				navbarList: [
					{
						title: '配置管理',
						menuIcon: '/static/home/2.png',
						child: [{
								title: '用户管理'
							},
							{
								title: '活动配置'
							},
							{
								title: '广告链接'
							}
						]
					},
					{
						title: '标签管理',
						menuIcon: '/static/home/3.png',
						child: [{
								title: '二维码'
							}
						]
					},
					{
						title: '数据统计',
						menuIcon: '/static/home/4.png',
						child: [{
								title: 'uv-pv统计'
							}
						]
					},
					{
						title: '奖品配置',
						menuIcon: '/static/home/5.png',
						child: [{
								title: '奖品配置'
							}
						]
					},
					{
						title: '审核',
						menuIcon: '/static/home/6.png',
						child: [{
								title: '媒体审核'
							},
							{
								title: '广告位审核'
							},
							{
								title: '用户审核'
							},
							{
								title: '投放审核'
							}
						]
					},
					{
						title: '数据收益',
						menuIcon: '/static/home/7.png',
						child: [{
								title: '媒体数据'
							},
							{
								title: '广告位数据'
							}
						]
					},
					{
						title: '广告媒体管理',
						menuIcon: '/static/home/8.png',
						child: [{
								title: '媒体管理'
							},
							{
								title: '广告位管理'
							}
						]
					},
					{
						title: '链接管理',
						menuIcon: '/static/home/9.png',
						child: [{
								title: '广告主链接'
							},
							{
								title: '曝光数据'
							},
						]
					},
					{
						title: '合同管理',
						menuIcon: '/static/home/10.png',
						child: [{
								title: '合同审核'
							}
						]
					},
					{
						title: '财务',
						menuIcon: '/static/home/11.png',
						child: [{
								title: '财务认证审核'
							},
							{
								title: '提现审核'
							}
						]
					}
				],
				first: -1,
				second: 0,
				active: -1,
				
				user: '',
				showUserMsg: false,
				login: false,
				
				confirmTitle: '确认退出？',
				
				isUserInfoShow: false,
				userItem: {},
				webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                },
				isScreenShow: true,
				screenUrl: process.env.NODE_ENV === 'development'? '../../static/screen-page/index.html':'/sys/static/screen-page/index.html'
			}
		},
		mounted() {
			this.initPage();
			this.initScreen()
		},
		onLoad() {
			let router = JSON.parse(Util.getStorage('router'));
			if (!Util.isNull(router)) {
				this.first = router.first
				this.second = router.second
				this.active = router.active
			} else {
				// this.first = -1
				// this.second = 0
				// this.active = -1
				this.first = 0
				this.second = 0
				this.active = 0
			}
			console.log(this.first, this.second, 'second')
			
			// this.first = -1
			// this.second = 0
			// this.active = -1
		},
		methods: {
			initScreen() {
				window.addEventListener("message",(e) => {
					if (e.data && e.data.params == 1) {
						this.isScreenShow = false
						console.log('窗口变化', e, e.data)
					}
				})
			},
			
			//未登录或者没网络
			async initPage() {
				let user = JSON.parse(Util.getStorage('user'))
				if (!Util.isNull(user)) {
					this.user = user;
					let res = await Request.USERCOMMONUSER()
					if (res.code == 200) {
						let v = {
							...user,
							...res.data
						}
						Util.setStorage('user', JSON.stringify(v))
					} else if (res.code == 401) {
						Util.removeStorage('user')
						uni.redirectTo({
							url: '../login/login'
						})
					}
				} else {
					uni.redirectTo({
						url: '../login/login'
					})
				}
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			
			// 打开每一主项
			handleOpen(key, keyPath) {
				this.active = key;
				this.first = key;
				this.second = 0;
				let router = {
					first: this.first,
					second: this.second,
					active: this.active,
				}
				Util.setStorage('router', JSON.stringify(router));
				console.log(key, keyPath, router, '切换主项');
			},
			
			// 选择子项
			openPage(e, v) {
				console.log(e, v)
				// this.$refs.myMedia.initTable();
				// location.reload();
				this.first = e;
				this.active = this.first
				this.second = v;
				let router = {
					first: this.first,
					second: this.second,
					active: this.active,
				}
				Util.setStorage('router', JSON.stringify(router));
				console.log(this.first, this.second, this.active, '子项');
			},
			
			reHome(e) {
				if (e == 1) {
					this.login = true;
				} else {
					this.userItem = JSON.parse(Util.getStorage('user'))
					this.isUserInfoShow = true
				}
			},
			
			closeConfirm(e) {
				console.log(e, 'eeeeeeeeee')
				if (e) {
					Util.removeStorage('user');
					Util.removeStorage('router');
					uni.navigateTo({
						url: '../login/login'
					})
				} 
				this.login = false
			},
			
			userCloseDialog() {
				this.isUserInfoShow = false
				this.userItem = {}
			}
			// changeRouter(e) {
			// 	// console.log(e);
			// 	this.first = e.first;
			// 	this.active = this.first
			// 	this.second = e.second;
			// 	let router = {
			// 		first: this.first,
			// 		second: this.second,
			// 		active: this.active,
			// 	}
			// 	Util.setStorage('router', JSON.stringify(router));
			// }
		}
	}
</script>
<style scoped>
	.cantainer {
		display: flex;
	}

	.menuIcon {
		width: 14px;
		height: 14px;
		margin-right: 8px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: calc(100vh - 60px);
		border: none;
		height: calc(100vh - 60px);
		overflow: hidden;
	}

	/deep/ .el-submenu .el-menu-item-group__title {
		padding: 0;
	}

	/deep/ .menuLeft .el-submenu__title {
		background: #191B28 !important;
	}

	/deep/ .menuLeft .el-menu-item {
		background-color: #191B28 !important;
	}

	.el-submenu.is-active {
		background-color: #191B28 !important;
	}

	.active {
		border-left: solid 2px #4A92FD;
		height: 55px;
	}

	.border {
		display: inline-block;
		position: absolute;
		left: 0;
	}

	.page {
		width: 100%;
		font-family: 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', 'Helvetica Neue', Helvetica, 'PingFang SC', Arial, sans-serif;
		font-size: 14px;
		cursor: pointer;
		position: relative;
	}

	.navbar {
		height: 60px;
		width: 100%;
		position: relative;
	}

	.logo {
		width: 56px;
		height: 22px;
		position: absolute;
		left: 40px;
		top: 20px;
	}

	.business {
		width: 60px;
		display: flex;
		justify-content: center;
		
		color: #32333b;
	}

	.navbar-Right {
		line-height: 60px;
		height: 60px;
		float: right;
		display: flex;
		align-items: center;
		margin-right: 40px;
		position: absolute;
		right: 0px;
	}

	.line {
		display: inline-block;
		float: left;
		color: #eaeaea;
		width: 3px;
		margin: 0 15px;
	}

	.navbar-Right-bell {
		color: #2e2a27;
		position: relative;
		cursor: pointer;
		font-size: 20px;
	}

	.content {
		width: calc(100% - 200px);
		height: calc(100vh - 61px);
		overflow: hidden;
		overflow-y: auto;
		/* padding: 0 40px; */
		background-color: #f7f8ff;
		scrollbar-width: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.2) #ededed;
	}
	.childPage{
		border-top: solid 1px #F5F5F5;
	}

	.content::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}

	.content::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #535353;
	}

	.content::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: #ededed;
	}

	.iframe {
		width: 100%;
		height: 100%;
		border: none;
		background-color: #f7f8ff;
	}
	
	.bg-fff {
		background-color: #fff;
	}
	
	.large-screen {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
	}
	
	.large-screen iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	/* .go-back {
		position: absolute;
		height: 0.8rem;
		line-height: 0.75rem;
		color: #fff;
		left: 0.5rem;
		font-size: 0.2rem;
	} */
</style>
